<script>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'MyReports',
  setup() {
    const userInfo = ref({})
    const reports = ref([])

    const getUserInfo = async () => {
      try {
        const response = await request.get('/user/info')
        if (response.code === 1) {
          userInfo.value = response.data
        } else {
          ElMessage.error(response.msg || '获取用户信息失败')
        }
      } catch (error) {
        ElMessage.error('服务异常')
      }
    }

    const getReports = async () => {
      try {
        const response = await request.get(`/report/page?userId=${userInfo.value.id}`)
        if (response.code === 1) {
          reports.value = response.data.list
        } else {
          console.error(response.msg || '获取评论失败')
        }
      } catch (error) {
        console.error('服务异常')
      }
    }

    const formatTime = (time) => {
      return time ? time.replace('T', ' ') : '未知时间'
    }

    const reportStatus = (status) => {
      return status === 1 ? '未处理' : '已处理'
    }

    onMounted(async () => {
      await getUserInfo()
      getReports()
    })

    return {
      reports,
      formatTime,
      reportStatus
    }
  }
}
</script>

<template>
  <div class="my-reports">
    <h2>我的举报</h2>
    <el-scrollbar height="500px">
      <div v-for="report in reports" :key="report.id" class="scrollbar-demo-item">
        <div class="report-header">
          <div class="report-details">
            <p>举报序号：{{ report.id }} ({{ reportStatus(report.status) }})</p>
          </div>
          <div class="report-time">
            <span class="create-time">{{ formatTime(report.createTime) }}</span>
          </div>
        </div>
        <p class="report-content">举报原因：{{ report.reason }}</p>
      </div>
      <div v-if="reports.length === 0" class="no-reports">
        暂无举报
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.my-reports {
  padding: 0;
  height: 80vh;
}

h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.scrollbar-demo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin: 5px 0;
  padding: 8px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  position: relative;
}

.report-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.report-details {
  height: 1px;
  display: flex;
  align-items: center;
}

.report-time {
  height: 1px;
  display: flex;
  align-items: center;
}

.create-time {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.report-content {
  height: auto;
  margin-top: 5px;
}

.no-reports {
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 20px;
}
</style>